<template>
	<view class="guess-recommend" v-if="is_individualization && productList.length > 0">
		<view class="title u-flex-center">
			<u-icon name="play-left" size="14" color="#000000"></u-icon>
			<view class="product-title u-flex u-flex-center">猜你喜欢</view>
			<u-icon name="play-right" size="14" color="#000000"></u-icon>
		</view>
		<product-list :list="productList" :total="productList.length" empty-mode="zoom" @addShop="addShop"
			:loadmore="false" @productClick="productClick"></product-list>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	import productList from './product-list.vue'
	export default {
		name: "guess-recommend",
		components: {
			productList
		},
		data() {
			return {};
		},
		computed: {
			...mapState({
				is_individualization: state => state.guessRecommend.is_individualization,
				productList: state => state.guessRecommend.productList,
			})
		},
		methods: {
			// 添加购物车
			addShop(e) {
				if (!this.$isLogin()) {
					this.$navigateTo()
					return;
				}
				if (this.isShopCart == false) return;
				this.isShopCart = false;
				this.$post("shopCart/addReduce", {
					product_type: 1,
					type: 1,
					product_id: e.id,
					product_spec_id: e.spec.id,
					number: 1,
				}).then(res => {
					this.isShopCart = true;
					if (res.code == 200) {
						this.$showToast(res.msg)
						// 更新购物车总数
						this.$store.commit('shopCart/setShopCartNumber', res.data.total);
						// 更新已购物车
						this.$store.commit('shopCart/setIsUpdate');
					} else {
						this.$showToast(res.msg)
					}
				}).catch(ex => {
					this.isShopCart = true;
					this.$errorToast()
				});
			},
			productClick(e) {
				this.$navigateTo('/subPackages/product/product-detail?product_id=' + e)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.guess-recommend {
		width: 100%;
		padding-top: 20rpx;

		.title {
			padding: 40rpx 0;
			background-color: #FFFFFF;

			.product-title {
				padding: 0 20rpx;
				line-height: 1;
				font-size: 32rpx;
				font-weight: bolder;
			}
		}
	}
</style>